<template>
  <!-- Top Section: Calendar -->
  <el-header class="calendar-header">
    <el-calendar v-model="currentDate">
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-year')">
            {{ t('calendar.prevYear') }}
          </el-button>
          <el-button size="small" @click="selectDate('prev-month')">
            {{ t('calendar.prevMonth') }}
          </el-button>
          <el-button size="small" @click="selectDate('today')">{{ t('calendar.today') }}</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            {{ t('calendar.nextMonth') }}
          </el-button>
          <el-button size="small" @click="selectDate('next-year')">
            {{ t('calendar.nextYear') }}
          </el-button>
          <el-button size="small" type="danger" @click="clearDateSelection">
            {{ t('calendar.clearSelection') }}
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <div 
          @click.stop="handleDateCellClick(data)" 
          @contextmenu.prevent="showContextMenu($event, data)"
          class="custom-date-cell"
          :class="{'date-selected': selectedDate === data.day}"
        >
          <template v-if="getCardCountForDate(data.day) !== 0">
            <el-badge :value="getCardCountForDate(data.day)" class="badge-item">
              <div class="date-content">
                {{ data.day }}
                <span v-if="selectedDate === data.day" class="checkmark">✓</span>
              </div>
            </el-badge>
          </template>
          <template v-else>
            <div class="date-content">
              {{ data.day }}
              <span v-if="selectedDate === data.day" class="checkmark">✓</span>
            </div>
          </template>
        </div>
      </template>
    </el-calendar>
    
    <!-- Context menu for calendar dates -->
    <div 
      v-show="contextMenuVisible" 
      :style="{left: contextMenuX + 'px', top: contextMenuY + 'px'}" 
      class="calendar-context-menu"
      ref="contextMenu"
    >
      <div class="context-menu-item" @click="createCardWithStartTime">
        <el-icon><Plus /></el-icon> {{ t('calendar.createCardHere') }}
      </div>
    </div>
  </el-header>

  <!-- 顶部信息栏 -->
  <div class="info-bar">
    <div class="info-bar-left">
      <el-button icon="Plus" @click="createNewCard">{{ t('homepage.createCard') }}</el-button>
      <el-tag type="info" size="large" effect="plain" class="count-tag">
        <el-icon><Document /></el-icon>
        {{ t('homepage.loadedCards') }}: {{ items.length }}
      </el-tag>
    </div>
    <div class="info-bar-right">

      <el-tag 
        v-if="selectedDate" 
        type="success" 
        size="large" 
        effect="dark" 
        class="filter-tag"
      >
        <el-icon><Calendar /></el-icon>
        {{ t('homepage.currentFilter') }}: {{ formatDateDisplay(selectedDate, true) }} 
        <span class="card-count">({{ displayedItems.length }} {{ t('common.cardUnit') }})</span>
        <el-icon class="close-icon" @click.stop="clearDateSelection"><Close /></el-icon>
      </el-tag>
    </div>
  </div>

  <!-- Bottom Section: Content -->
  <el-container class="bottom-section">
    <!-- Left Sidebar -->
    <!-- <el-aside class="sidebar" width="20%">
        <h2>功能标题</h2>
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1">功能1</el-menu-item>
          <el-menu-item index="2">功能2</el-menu-item>
          <el-menu-item index="3">功能3</el-menu-item>
        </el-menu>
      </el-aside> -->

    <!-- Right Content Area -->
    <el-main class="main-content" ref="mainContent">
      <el-row class="search-bar" :gutter="20">
        <el-col :span="24">
          <el-input v-model="searchQuery" :placeholder="t('homepage.searchPlaceholder')" clearable />
        </el-col>
      </el-row>
      <el-row class="content-grid" :gutter="20">
        <el-col :span="8" v-for="item in displayedItems" :key="item.id">
          <el-card shadow="hover" @click="viewCardDetail(item.id)" class="clickable-card">
            <h3>{{ item.title }}</h3>
            <div class="content-preview-container">
              <CardContentPreview :content="item.content || ''" />
              <div class="ellipsis-indicator" v-if="item.content && item.content.length > 100">...</div>
            </div>
            <div class="tags">
              <el-tag 
                v-for="tag in item.tags" 
                :key="tag" 
                :style="item.tagColors && item.tagColors[tag] ? 
                  {backgroundColor: item.tagColors[tag] + '33', borderColor: item.tagColors[tag], color: item.tagColors[tag]} : 
                  {}"
              >
                {{ tag }}
              </el-tag>
            </div>
            <div class="timestamps">
              <p>{{ t('homepage.startTime') }}: {{ formatTimeFieldSync(item.startTime, 'start') }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="loading-more">
        <template v-if="loading">
          <el-icon class="is-loading">
            <Loading />
          </el-icon> {{ t('common.loading') }}
        </template>
        <template v-else-if="!hasMore && items.length > 0">
          <span>{{ t('common.noMore') }}</span>
        </template>
        <template v-else-if="items.length === 0 && !loading">
          <span>{{ t('common.noData') }}</span>
        </template>
        <template v-else-if="hasMore && !loading">
          <div class="load-more-hint">{{ t('common.scrollToLoadMore') }}</div>
        </template>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { fetchCards, deleteCard as deleteCardApi } from '../services/cardService';
import type { CardItem } from '../types/cardData';
import type { CalendarInstance } from 'element-plus';
import { Document, Calendar, Close, Loading, Plus } from '@element-plus/icons-vue';
// 导入自定义预览组件
import CardContentPreview from '../components/CardContentPreview.vue';
// 导入导航历史工具
import { setSourcePage } from '../utils/navigation';
import { formatDateTimeSync, formatTimeFieldSync } from '../utils/dateFormatter';

const { t, locale } = useI18n();

const router = useRouter();
const searchQuery = ref('');
const items = ref<CardItem[]>([]);
const allItems = ref<CardItem[]>([]); 
const currentPage = ref(1);
const pageSize = ref(15); // 默认每页15条
const loading = ref(false);
const hasMore = ref(true);
const dateCardCountMap = ref<Record<string, number>>({});
const calendar = ref<CalendarInstance | null>(null);
const selectedDate = ref('');
const mainContent = ref<any>(null);
const currentDate = ref(new Date());
const contextMenuVisible = ref(false);
const contextMenuX = ref(0);
const contextMenuY = ref(0);
const contextMenuDate = ref('');
const contextMenu = ref<HTMLElement | null>(null);
const scrollDebounceTimer = ref<ReturnType<typeof setTimeout> | null>(null);

// 从设置中获取用户配置的页面大小
const getUserPageSize = (): number => {
  try {
    const generalSettings = localStorage.getItem('general-settings');
    if (generalSettings) {
      const settings = JSON.parse(generalSettings);
      if (settings.pageSize && typeof settings.pageSize === 'number') {
        return settings.pageSize;
      }
    }
  } catch (error) {
    console.error('获取页面大小设置失败:', error);
  }
  return 15; // 默认值
};

// 从设置中获取最大加载页数
const getMaxLoadPages = (): number => {
  try {
    const generalSettings = localStorage.getItem('general-settings');
    if (generalSettings) {
      const settings = JSON.parse(generalSettings);
      if (settings.maxLoadPages && typeof settings.maxLoadPages === 'number') {
        return settings.maxLoadPages;
      }
    }
  } catch (error) {
    console.error('获取最大加载页数设置失败:', error);
  }
  return 5; // 默认值
};

// 计算属性
const displayedItems = computed(() => {
  let filteredItems = items.value;
  
  if (selectedDate.value) {
    filteredItems = filteredItems.filter(item => {
      if (!item.startTime) return false; // Skip items without startTime
      const itemDate = item.startTime.split(' ')[0];
      return itemDate === selectedDate.value;
    });
  }
  
  if (searchQuery.value) {
    filteredItems = filteredItems.filter(
      (item) =>
        item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
        item.content.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  }
  
  return filteredItems;
});

// 创建新卡片
const createNewCard = () => {
  router.push('/editor');
};

// 切换语言
const toggleLanguage = () => {
  const newLocale = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN';
  locale.value = newLocale;
  localStorage.setItem('language', newLocale);
};

// 加载卡片数据
const fetchItems = async (reset = false) => {
  if ((loading.value || !hasMore.value) && !reset) {
    console.log('跳过加载:', {loading: loading.value, hasMore: hasMore.value, reset});
    return;
  }
  
  if (reset) {
    items.value = [];
    currentPage.value = 1;
    hasMore.value = true;
    selectedDate.value = "";
  }
  
  // 安全限制：避免过度加载，使用配置的最大页数
  const maxLoadPages = getMaxLoadPages();
  if (currentPage.value > maxLoadPages && !reset) {
    console.log(`已达到最大自动加载页数限制(${maxLoadPages}页)`);
    hasMore.value = true; // 保留加载更多按钮
    return;
  }
  
  console.log('开始加载第', currentPage.value, '页卡片');
  loading.value = true;
  
  try {
    const response = await fetchCards(currentPage.value, pageSize.value);
    
    // 检查响应是否有效
    if (!response || !response.items) {
      console.error('无效的响应数据');
      hasMore.value = false;
      return;
    }
    
    console.log('获取到卡片:', response.items.length, '张，总数:', response.total);
    
    if (response.items.length > 0) {
      // 使用展开运算符合并数组
      items.value = [...items.value, ...response.items];
      allItems.value = [...items.value];
      currentPage.value++;
      hasMore.value = response.hasMore;
      
      // 更新日期卡片映射
      updateDateCardCountMap();
      
      console.log('加载后卡片总数:', items.value.length);
      console.log('是否有更多卡片:', hasMore.value);
    } else {
      hasMore.value = false;
    }
  } catch (error) {
    console.error('获取卡片数据失败:', error);
    hasMore.value = false;
  } finally {
    loading.value = false;
  }
};

// 更新日期卡片数量映射
const updateDateCardCountMap = () => {
  dateCardCountMap.value = {};
  
  items.value.forEach(item => {
    if (!item.startTime) return; // Skip items without startTime
    
    const dateStr = item.startTime.split(' ')[0];
    if (dateStr) { // Only proceed if we got a valid date string
      if (dateCardCountMap.value[dateStr]) {
        dateCardCountMap.value[dateStr]++;
      } else {
        dateCardCountMap.value[dateStr] = 1;
      }
    }
  });
};

// 获取指定日期的卡片数量
const getCardCountForDate = (dateStr: string) => {
  return dateCardCountMap.value[dateStr] || 0;
};

// 清除日期选择
const clearDateSelection = () => {
  selectedDate.value = "";
  
  // 重置页码并重新加载卡片
  currentPage.value = 1;
  items.value = [];
  hasMore.value = true;
  
  // 重新获取页面大小设置
  pageSize.value = getUserPageSize();
  
  // 加载第一页卡片
  fetchItems();
  
  console.log('已清除日期筛选，重新加载第一页卡片');
};

// 处理日期单元格点击事件
const handleDateCellClick = (data: any) => {
  if (!data || !data.day) {
    console.error('点击日期单元格失败: 无法获取日期数据');
    return;
  }
  
  if (selectedDate.value === data.day) {
    clearDateSelection();
    return;
  }
  
  selectedDate.value = data.day;
};

// 显示右键菜单
const showContextMenu = (event: MouseEvent, data: any) => {
  if (!data || !data.day) {
    console.error('右键菜单显示失败: 无法获取日期数据');
    return;
  }
  
  // 使用clientX和clientY来准确定位鼠标位置
  contextMenuX.value = event.clientX;
  contextMenuY.value = event.clientY;
  contextMenuDate.value = data.day;
  contextMenuVisible.value = true;

  // 确保菜单不会超出视口
  nextTick(() => {
    if (contextMenu.value) {
      const rect = contextMenu.value.getBoundingClientRect();
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      
      // 检查右边界
      if (rect.right > windowWidth) {
        contextMenuX.value = windowWidth - rect.width - 5;
      }
      
      // 检查下边界
      if (rect.bottom > windowHeight) {
        contextMenuY.value = windowHeight - rect.height - 5;
      }
    }
  });
};

// 创建卡片并设置开始时间
const createCardWithStartTime = () => {
  if (!contextMenuDate.value) {
    console.error('创建卡片失败: 无法获取日期数据');
    return;
  }
  
  router.push({
    path: '/editor',
    query: { startTime: contextMenuDate.value }
  });
  contextMenuVisible.value = false;
};

// 日期格式化
const formatDateDisplay = (dateStr: string, full = false) => {
  if (!dateStr) return '';
  
  if (!full) {
    // 只返回日期部分中的天数
    try {
      const date = new Date(dateStr);
      return date.getDate().toString();
    } catch (error) {
      return '';
    }
  }
  
  // 使用通用格式化方法，但不显示时间
  return formatDateTimeSync(dateStr, false);
};

// 查看卡片详情
const viewCardDetail = (id: string) => {
  router.push(`/card/${id}`);
};

// 日历导航方法
const selectDate = (type: string) => {
  const date = new Date(currentDate.value);
  
  switch (type) {
    case 'prev-year':
      date.setFullYear(date.getFullYear() - 1);
      break;
    case 'prev-month':
      date.setMonth(date.getMonth() - 1);
      break;
    case 'today':
      date.setTime(new Date().getTime());
      break;
    case 'next-month':
      date.setMonth(date.getMonth() + 1);
      break;
    case 'next-year':
      date.setFullYear(date.getFullYear() + 1);
      break;
  }
  
  currentDate.value = date;
};

// 生命周期钩子
onMounted(() => {
  // 设置当前页面作为导航来源
  setSourcePage('Home');
  
  // 从设置中获取页面大小
  pageSize.value = getUserPageSize();
  console.log('设置的每页加载卡片数量:', pageSize.value);
  
  // 初始加载第一页卡片
  fetchItems();
  
  nextTick(() => {
    calendar.value = document.querySelector('.el-calendar') as any as CalendarInstance;
    
    // 添加滚动监听，但仅在初始内容加载完成后
    setTimeout(() => {
      // 仅添加滚动监听，不主动触发加载检查
      setupScrollListeners();
      console.log('设置了滚动监听');
    }, 1000);
  });
  
  // 添加全局点击事件以关闭右键菜单
  document.addEventListener('click', handleDocumentClick);
  
  // 打印当前卡片总数，用于调试
  console.log('初始加载卡片总数:', items.value.length);
  console.log('是否有更多卡片:', hasMore.value);
});

// 设置滚动监听器
const setupScrollListeners = () => {
  // 添加窗口滚动监听器，使用passive选项提高性能
  window.addEventListener('scroll', handleScroll, { passive: true });
  
  // 设置滚动观察器，用于页面底部元素可见性检测
  if ('IntersectionObserver' in window) {
    const loadingElement = document.querySelector('.loading-more');
    if (loadingElement) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          // 只要加载更多区域可见就触发加载
          if (entry.isIntersecting && hasMore.value && !loading.value) {
            console.log('加载更多元素可见，触发加载');
            fetchItems();
          }
        });
      }, { 
        rootMargin: '100px', // 提前100px触发
        threshold: 0.1 // 仅当10%可见时触发
      });
      
      observer.observe(loadingElement);
    }
  }
};

// 检查是否应该加载更多卡片
const checkIfShouldLoadMore = () => {
  if (loading.value || !hasMore.value) return;
  
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  
  console.log('检查是否需要更多内容:', {
    scrollTop,
    windowHeight,
    documentHeight,
    hasMore: hasMore.value,
    ratio: documentHeight / windowHeight,
    cardsLoaded: items.value.length
  });
  
  // 限制自动加载：仅当内容太少且卡片数量小于两倍页面大小时才自动加载
  // 这样最多只会加载两页卡片，不会加载所有卡片
  if (documentHeight <= windowHeight * 1.1 && hasMore.value && items.value.length < pageSize.value * 2) {
    console.log('内容不足，自动加载一页卡片');
    fetchItems();
    // 不再递归调用，避免加载所有卡片
  }
};

// 处理滚动事件，当滚动到一定位置时加载更多卡片
const handleScroll = () => {
  if (loading.value || !hasMore.value) return;
  
  // 清除之前的定时器，防止频繁触发
  if (scrollDebounceTimer.value) {
    clearTimeout(scrollDebounceTimer.value);
  }
  
  // 添加防抖，避免滚动时频繁触发
  scrollDebounceTimer.value = setTimeout(() => {
    // 使用窗口的滚动位置
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    
    // 计算滚动到底部的百分比 (0-100)
    const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
    
    // 打印滚动信息，用于调试
    console.log('滚动位置:', scrollTop, '窗口高度:', windowHeight, '文档高度:', documentHeight, '滚动百分比:', scrollPercent.toFixed(2) + '%');
    
    // 当用户滚动超过50%时触发加载更多（降低触发阈值）
    if (scrollPercent > 50) {
      console.log('用户滚动触发加载更多');
      fetchItems();
    }
  }, 200); // 保持适当的防抖时间
};

// 处理文档点击事件以关闭右键菜单的函数
const handleDocumentClick = (event: MouseEvent) => {
  if (contextMenuVisible.value && contextMenu.value && !contextMenu.value.contains(event.target as Node)) {
    contextMenuVisible.value = false;
  }
};

// 当配置发生变化时监听并更新pageSize
const checkForSettingsChanges = () => {
  // 重新获取页面大小设置
  const newPageSize = getUserPageSize();
  if (newPageSize !== pageSize.value) {
    console.log('检测到页面大小设置变化:', pageSize.value, '->', newPageSize);
    pageSize.value = newPageSize;
    
    // 可能需要重新加载数据
    if (items.value.length > 0) {
      currentPage.value = 1;
      items.value = [];
      hasMore.value = true;
      fetchItems();
    }
  }
};

// 当页面从后台变为活动状态时，检查设置是否变化
window.addEventListener('focus', checkForSettingsChanges);

// 组件销毁时清理
onBeforeUnmount(() => {
  document.removeEventListener('click', handleDocumentClick);
  
  // 移除窗口滚动监听器
  window.removeEventListener('scroll', handleScroll);
  
  // 移除页面焦点监听器
  window.removeEventListener('focus', checkForSettingsChanges);
});
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* 顶部信息栏样式 */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.info-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.info-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.language-switch {
  margin-right: 12px;
}

.calendar-header {
  position: relative;
  flex: 0 0 360px;
  height: auto;
  width: 100%;
  background: #fff;
  margin: 0;
  padding: 8px 16px;
  box-sizing: border-box;
  border-bottom: 2px solid #e4e7ed;
}

:deep(.el-calendar) {
  height: 100%;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}

:deep(.el-calendar__header) {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fafafa;
  border-radius: 4px 4px 0 0;
}

:deep(.el-calendar__body) {
  flex: 1;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
}

:deep(.el-calendar-table) {
  flex: 1;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

:deep(.el-calendar-table td) {
  border: 1px solid #ebeef5;
  height: 48px;
  padding: 4px;
  vertical-align: middle;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding:  0;
}

:deep(.el-calendar-table th) {
  text-align: center;
  background: #fafafa;
  font-weight: 500;
}

.bottom-section {
  flex: 1;
  display: flex;
  background: #fff;
  position: relative;
  z-index: 1;
  min-height: 0;
  padding-top: 0;
  margin-top: 0;
}

.sidebar {
  width: 20%;
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  flex-shrink: 0;
  padding: 24px 16px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
}

.sidebar h2 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

:deep(.el-menu) {
  border: none;
  background-color: transparent;
}

:deep(.el-menu-item) {
  height: 44px;
  line-height: 44px;
  margin: 4px 0;
  border-radius: 6px;
  font-size: 15px;
  color: #606266;
  transition: all 0.3s ease;
}

:deep(.el-menu-item:hover) {
  background-color: #ecf5ff !important;
  color: #409eff;
}

:deep(.el-menu-item.is-active) {
  background-color: #409eff !important;
  color: #ffffff !important;
  font-weight: 500;
}

:deep(.el-menu-item) i {
  margin-right: 12px;
  font-size: 18px;
}

.main-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #fff;
}

.content-grid {
  margin-top: 16px;
}

.el-card {
  height: 220px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.clickable-card {
  cursor: pointer;
}

.clickable-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

:deep(.el-card__body) {
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-preview-container {
  position: relative;
  margin-bottom: 12px;
  height: 4.5em;
  overflow: hidden;
}

/* WangEditor样式覆盖 */
:deep(.w-e-text-container) {
  height: 4.5em !important;
  overflow: hidden !important;
}

:deep(.w-e-text-container p) {
  margin: 0;
  line-height: 1.5em;
}

:deep(.w-e-text) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  max-height: 4.5em !important;
}

.ellipsis-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: 0 4px;
  font-size: 14px;
  color: #909399;
}

.editor-preview {
  height: 4.5em !important;
  overflow: hidden !important;
  min-height: unset !important;
  border: none !important;
  padding: 0 !important;
}

:deep(.w-e-toolbar) {
  display: none !important;
}

.tags {
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.el-tag {
  border-radius: 4px;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.timestamps {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #909399;
  display: flex;
  justify-content: space-between;
}

.timestamps p {
  margin: 0;
}

.search-bar {
  margin: 0 0 20px 0;
  display: flex;
  justify-content: space-between;
  padding: 8px;
  align-items: center;
}

.card-count-display {
  display: none; /* 不再需要 */
}

.info-tags {
  display: none; /* 不再需要 */
}

:deep(.el-tag--large) {
  font-size: 14px;
  padding: 0 12px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.count-tag {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.filter-tag {
  position: relative;
  padding-right: 30px;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
}

.card-count {
  opacity: 0.8;
  font-size: 12px;
  font-weight: 400;
}

.close-icon {
  cursor: pointer;
  position: absolute;
  right: 8px;
  font-size: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 3px;
  transition: all 0.2s;
}

.close-icon:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

:deep(.el-icon) {
  vertical-align: middle;
}

.loading-more {
  text-align: center;
  padding: 20px 0;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
  margin-top: 20px;
}

.loading-more:hover {
  /* 移除之前的悬停效果 */
}

.loading-more .el-icon {
  font-size: 16px;
}

.loading-more span {
  color: #606266;
  font-size: 14px;
}

.load-more-button {
  margin-bottom: 10px;
  padding: 12px 24px;
  transition: all 0.3s;
}

.load-more-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.load-more-hint {
  color: #606266;
  font-size: 14px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.load-more-hint::before,
.load-more-hint::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background-color: #dcdfe6;
  margin: 0 10px;
}

.custom-date-cell {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.custom-date-cell:hover {
  background-color: rgba(25, 137, 250, 0.1);
  transform: scale(1.02);
}

.date-selected {
  background-color: rgba(25, 137, 250, 0.15);
  box-shadow: 0 2px 6px rgba(25, 137, 250, 0.2);
}

.date-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px 8px;
  font-weight: 500;
}

.checkmark {
  color: #6236ff;
  font-weight: bold;
  margin-left: 4px;
  font-size: 16px;
}

:deep(.badge-item .el-badge__content) {
  border: none;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-context-menu {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.context-menu-item {
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  transition: all 0.2s ease;
}

.context-menu-item:hover {
  background-color: #f5f7fa;
}
</style>